<template id='TopBar'>
  <div class="TopBar">
    <div class="logo">LOGO</div>
    <ul class="menus">
      <li v-for="(item, index) in menuList" :key="index">
        <span
          @click="selectMenu(item)"
          :class="{ isClick: clickMenu == item.id }"
          >{{ item.name }}</span
        >
      </li>
    </ul>
    <div class="downLoad"><span>Download app</span></div>
    <div class="language">
      <p>{{ language }}</p>
      <div
        class="dropDown"
        :style="{ backgroundImage: `url(${dropBg})` }"
      ></div>
    </div>
    <div class="phone">
      <span @click="openDrawer">目录</span>
      <div class="drawer" v-if="isShowDrawer">
        <div
          class="coverMain"
          :class="[
            { isShowCoverMain: isShowDrawer },
            { isHiddenCoverMain: isFinishDrawerAnimation },
          ]"
        >
          <div class="close" @click="closeDrawer"></div>
          <ul class="phoneMenus">
            <li v-for="(item, index) in menuList" :key="index">
              <span
                @click="selectMenu(item)"
                :class="{ isClick: clickMenu == item.id }"
                >{{ item.name }}
                <div :class="{ isLine: clickMenu == item.id }"></div>
              </span>
            </li>
          </ul>
          <div class="language">
            <p>{{ language }}</p>
            <div
              class="dropDown"
              :style="{ backgroundImage: `url(${dropBg})` }"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "TopBar",
  components: {},
  props: {
    clickMenu: {
      type: Number,
      default: 2,
    },
  },
  // 定义属性
  data() {
    return {
      screenWidth: "",
      isShowDrawer: false,
      isFinishDrawerAnimation: false,
      dropBg: require("../assets/images/topBar/topDrop.png"),
      menuList: [
        {
          id: 1,
          name: "首页",
          path: "/index",
        },
        {
          id: 2,
          name: "游戏",
          path: "/game",
        },
        {
          id: 3,
          name: "交易市场",
          path: "",
        },
        {
          id: 4,
          name: "流动性挖矿",
          path: "",
        },
        {
          id: 5,
          name: "百科全书",
          path: "",
        },
        {
          id: 6,
          name: "谁他妈知道",
          path: "",
        },
        {
          id: 7,
          name: "谁他妈知道",
          path: "",
        },
      ],
      language: "简体中文",
      defferScroll: function (event) {
        event.preventDefault();
      },
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //打开手机目录
    openDrawer() {
      this.isShowDrawer = true;
    },
    //关闭手机目录
    closeDrawer() {
      this.isFinishDrawerAnimation = true;
      setTimeout(() => {
        this.isShowDrawer = false;
        this.isFinishDrawerAnimation = false;
      }, 500);
    },
    //选择菜单
    selectMenu(item) {
      if (this.screenWidth <= 480) {
        this.closeDrawer();
        setTimeout(() => {
          this.$emit("changeMenu", item);
        }, 500);
      } else {
        this.$emit("changeMenu", item);
      }
    },
    getScreenWidth() {
      this.screenWidth =
        document.body.clientWidth || document.documentElement.clientWidth;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getScreenWidth();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.TopBar {
  background-image: url("../assets/images/topBar/bg.png");
  background-size: 100% 100%;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size: 24px;
  .logo {
    width: 93px;
    margin: 0 74px;
    cursor: pointer;
  }
  .menus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    li {
      margin-right: 71px;
      span {
        cursor: pointer;
        text-shadow: 2px 2px #000000;
      }
      span:hover {
        -webkit-animation: textShadow 0.6s both;
        animation: textShadow 0.6s both;
      }
      .isClick {
        font-size: 36px;
        font-weight: normal;
        font-stretch: normal;
        -webkit-animation: textShadow 0.6s both;
        animation: textShadow 0.6s both;
        @-webkit-keyframes textShadow {
          0% {
            text-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000,
              0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000;
            -webkit-transform: translateX(0);
            transform: translateX(0);
          }
          100% {
            text-shadow: 1px 0 #000000, 2px 0 #000000, 3px 0 #000000,
              4px 0 #000000, 5px 0 #000000, 6px 0 #000000, 7px 0 #000000,
              8px 0 #000000;
            -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
          }
        }
        @keyframes textShadow {
          0% {
            text-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000,
              0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000;
            -webkit-transform: translateX(0);
            transform: translateX(0);
          }
          100% {
            text-shadow: 1px 0 #000000, 2px 0 #000000, 3px 0 #000000,
              4px 0 #000000, 5px 0 #000000, 6px 0 #000000, 7px 0 #000000,
              8px 0 #000000;
            -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
          }
        }
      }
    }
    li:last-child {
      margin-right: 0;
    }
  }
  .downLoad {
    width: 165px;
    height: 50px;
    background-image: url("../assets/images/topBar/downBtn.png");
    background-size: 100% 100%;
    font-size: 16px;
    margin-right: 41px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    span {
      margin-top: 14px;
    }
  }
  .language {
    margin-right: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      margin-right: 11px;
    }
    .dropDown {
      background-size: 100% 100%;
      width: 30px;
      height: 32px;
      cursor: pointer;
    }
  }
  .phone {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .TopBar {
    position: fixed;
    top: 0;
    background-image: url("../assets/images/topBar/bg3.png");
    background-size: 100% 100%;
    height: 67px;
    z-index: 98;
    .logo {
      margin: 0 30px;
    }
    .menus {
      display: none;
    }
    .downLoad {
      width: 137.5px;
      height: 41.6px;
      margin-left: auto;
      span {
        margin-top: 10px;
      }
    }
    .language {
      display: none;
    }
    .phone {
      display: block;
      margin-right: 30px;
      .drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background-color: rgba(0, 0, 0, 0.3);
        overflow: hidden;
        .coverMain {
          height: 100%;
          position: absolute;
          right: 0;
          width: 50%;
          .close {
            position: absolute;
            top: 0;
            right: 0;
            background: url("/../../assets/images/game/closeCommonDialog.png");
            width: 50px;
            height: 55px;
            background-size: 100% 100%;
            z-index: 101;
          }
          .phoneMenus {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: #273245;
            padding-top: 65px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            li {
              margin-bottom: 100px;
              span {
                display: block;
                .isLine {
                  position: absolute;
                  bottom: -15px;
                  left: -20%;
                  width: 140%;
                  height: 4px;
                  background-color: #ffffff;
                  border-radius: 2px;
                  box-shadow: 0px 2px 0px 0px #000000;
                  -webkit-animation: scaleCenter 0.25s
                    cubic-bezier(0.39, 0.575, 0.565, 1) both;
                  animation: scaleCenter 0.25s
                    cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s both;
                  @-webkit-keyframes scaleCenter {
                    0% {
                      -webkit-transform: scaleX(0);
                      transform: scaleX(0);
                    }
                    100% {
                      -webkit-transform: scaleX(1);
                      transform: scaleX(1);
                    }
                  }
                  @keyframes scaleCenter {
                    0% {
                      -webkit-transform: scaleX(0);
                      transform: scaleX(0);
                    }
                    100% {
                      -webkit-transform: scaleX(1);
                      transform: scaleX(1);
                    }
                  }
                }
              }
              .isClick {
                -webkit-animation: textShadow 0.6s both;
                animation: textShadow 0.6s both;
                @-webkit-keyframes textShadow {
                  0% {
                    text-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000,
                      0 0 #000000, 0 0 #000000;
                    -webkit-transform: translateX(0);
                    transform: translateX(0) scale(1);
                  }
                  100% {
                    text-shadow: 1px 0 #000000, 2px 0 #000000, 3px 0 #000000,
                      4px 0 #000000;
                    -webkit-transform: translateX(-4px);
                    transform: translateX(-4px) scale(1.5);
                  }
                }
                @keyframes textShadow {
                  0% {
                    text-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000,
                      0 0 #000000, 0 0 #000000;
                    -webkit-transform: translateX(0);
                    transform: translateX(0) scale(1);
                  }
                  100% {
                    text-shadow: 1px 0 #000000, 2px 0 #000000, 3px 0 #000000,
                      4px 0 #000000;
                    -webkit-transform: translateX(-4px);
                    transform: translateX(-4px) scale(1.5);
                  }
                }
              }
            }
          }
          .language {
            position: absolute;
            width: 100%;
            bottom: 214px;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0;
            p {
              margin-right: 11px;
            }
            .dropDown {
              background-size: 100% 100%;
              width: 30px;
              height: 32px;
              cursor: pointer;
            }
          }
        }
        .isShowCoverMain {
          opacity: 1;
          -webkit-animation: slideRight 0.5s
            cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
          animation: slideRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s
            both;
          @-webkit-keyframes slideRight {
            0% {
              -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
            }
            100% {
              -webkit-transform: translateX(0);
              transform: translateX(0);
            }
          }
          @keyframes slideRight {
            0% {
              -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
            }
            100% {
              -webkit-transform: translateX(0);
              transform: translateX(0);
            }
          }
        }
        .isHiddenCoverMain {
          -webkit-animation: slideOutRight 0.5s
            cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
          animation: slideOutRight 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
            both;
          @-webkit-keyframes slideOutRight {
            0% {
              -webkit-transform: translateX(0);
              transform: translateX(0);
            }
            100% {
              -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
            }
          }
          @keyframes slideOutRight {
            0% {
              -webkit-transform: translateX(0);
              transform: translateX(0);
            }
            100% {
              -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
            }
          }
        }
      }
    }
  }
}
</style>